<template>
	<view class="content">
		<goodsList :data="state.goods"></goodsList>
		<safeBottom></safeBottom>
	</view>
</template>

<script setup>
	import request from '@/utils/request.js'
import { reactive } from "vue";
import { onReachBottom, onShow } from '@dcloudio/uni-app'
	const state = reactive({
		goods: [],
		isEnd:false,
		loading: false,
		params: {
			page: 0,
			count: 20,
			name:'',
			categoryId: 0,
			isNew: 1
		},
	})
	const getMyCollect = (params) => {
		state.loading = true;
		request({
			url:'api/goods/goodsList',
			data: state.params,
			needLogin: true,
		}).then(res => {
			if(state.params.page === 0) {
				state.goods = res;
			}else {
				state.goods = [...state.goods,...res]
			}
			state.isEnd = res.length < state.params.count;
			if(!state.isEnd) state.params.page++;
			state.loading = false;
		}).catch(err => {
			state.loading = false;
		})
	}
	getMyCollect()
	onReachBottom(() => {
		if(state.isEnd || state.loading) return;
		getMyCollect()
	})
</script>

<style lang="scss">
.content {
	padding: 30rpx;
}
</style>
